/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component } from 'react'
import { NavBar, Icon} from 'antd-mobile';
import styles from './MapFound.module.scss'
import { getCurrentCity } from '../../utils/baiduMap'
import { getAreaMap,getHousesById } from '../../api/index'
import HouseLtem from '../../components/HouseLtem'
const BMap = window.BMap
// 把map变量定义到外部，方便组件使用
let map = null
// 为房源信息区域等级准备对应数据
const areaLeveData = [
  {level:1,className:'map_circle',zoom:10},
  {level:2,className:'map_circle',zoom:12},
  {level:3,className:'map_rect',zoom:15},
]
export default class MapFound extends Component {
  state = {
    cityname:'',
    cityArea:'',
    housesList:[],
    showHouse:false
  }
  // 房源信息等级
  areaLevel = 1
  componentDidMount(){
    this.initfBaiMap()
  }
 async initfBaiMap(){
   const { label:cityname,value: cityArea } = await getCurrentCity()
  //  console.log('ssss',res);
    // 创建地图实例
    map= new BMap.Map('container')
    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(cityname,10) 
    // 控制稍微晚一点执行，避免过早加载控件，出现界面错乱的问题
    setTimeout(()=>{
      // 比例尺
      map.addControl(new BMap.ScaleControl())
      // 平移缩放控件
      map.addControl(new BMap.NavigationControl())
      // 定位控件
      map.addControl(new BMap.GeolocationControl())
    },2000)
    map.addEventListener('dragstart',()=>{
      if(this.state.showHouse === true) {
        this.setState({
          showHouse: false
        })
      }
    })
    // 更新到状态中
    this.setState({
      cityname,
      cityArea
    })
    this.getAreaMapData()
  }
  // 获取房源信息
 async getAreaMapData(){
  // 获取当前城市的一级房源信息
   const res = await getAreaMap(this.state.cityArea)
   console.log('这个是',res);
   const areaList = res.data.body
   this.renderOverlay(areaList)
  }
  // 渲染覆盖物的方法
  renderOverlay(areaList){
    // 遍历创建覆盖物
    areaList.forEach(({label:areaName,value:areaId,coord:{latitude,longitude},count}) => {
       // 1️⃣准备覆盖物经纬度坐标位置
       const opts = {
        // position 其实是覆盖物左上角的坐标
        position: new BMap.Point(longitude,latitude), // 指定文本标注所在的地理位置
        offset: new BMap.Size(-35, -35) // 设置文本偏移量
      };
      const levelData = areaLeveData.find(item=> item.level === this.areaLevel)
      // 2️⃣创建文本标注对象
      const label = new BMap.Label(`<div class="${levelData.className}"><span>${areaName}</span><span>${count}</span></div>`,opts)
      // 3️⃣自定义文本标注样式
      label.setStyle({
        backgroundColor: 'transparent',
        border: 'none'
      });
      // 4️⃣把覆盖物添加到地图中
      map.addOverlay(label);     
      // 给每个覆盖物添加点击事件
      label.addEventListener('click', (e)=>{
        // console.log(`你点击了${areaName}--区域id${areaId}`)
        // 当前的区域等级+1
        this.areaLevel++
        if(this.areaLevel <= 3){
            // 1.清除旧的覆盖物
            setTimeout(()=>{
              map.clearOverlays()
            },10)
            // 2.根据新的区域Id，从新获取二级房源信息
            // 不支持async
            getAreaMap(areaId).then(res=>{
              // 获取二级列表信息
              const areaList = res.data.body
              this.renderOverlay(areaList)
              const levelData = areaLeveData.find(item=> item.level === this.areaLevel)
              // 设置中心点位置
              map.centerAndZoom(new BMap.Point(longitude,latitude),levelData.zoom)
            })
            // 3.根据二级房源信息，绘制对应的覆盖物          
        } else {
          // console.log('现在是3级房源信息，展示房屋列表');
          // 获取点击元素的鼠标位置
          console.log(e.changedTouches);
          const {clientX,clientY} =e.changedTouches[0]
          // window.screen.width 这个是屏幕的固定坐标
          // 水平移动到屏幕宽度的一半位置
          const x = window.screen.width / 2 - clientX
          // 垂直方向移动到屏幕高度的 4分之一  位置
          const y = window.screen.width / 4 - clientY
          // 根据坐标移动地图
          map.panBy(x,y)
          // 查询房屋信息
          getHousesById(areaId).then((res)=>{
              console.log('查看房源信息',res);
              this.setState({
                housesList: res.data.body.list,
                showHouse:true
              })
          })
        }
        

      })
    })
  }
  render() {
    const { showHouse,housesList } = this.state
    return (
      <div  className={styles.citys}>
          {/* // 地图 */}
          <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => 
            this.props.history.goBack()
          }
          >地图找房</NavBar>
          {/* 2.0地图容器 */}
          <div id="container"></div>
          {/* 3.0 房屋列表 */}
          <div className={`${styles.house} ${showHouse ? styles.show : ''}`}>
        <div className={styles.house_title}>
          <h3>房屋列表</h3>
          {/* <a href="#">更多房源</a> */}
          <a>更多房源</a>
        </div>
        <div className={styles.house_list}>
          {housesList.map((arr)=>(
             <HouseLtem key={arr.houseCode} {...arr} />
          ))}
             
        </div>
      </div>
      </div>
    )
  }
}
